<template>
    <Row>
        <Col span="24">
            <Card shadow>
                <p slot="title">
                    <Icon type="md-pin" />
                    热力图锚点
                </p>
                <Form
                    ref="poiForm"
                    :model="formData"
                    :rules="formRules"
                    :label-width="90"
                    label-position="left"
                    class="form-wrapper"
                >
                    <FormItem label="ID" prop="id">
                        <Row>
                            <Col span="24">
                                <Input
                                    v-model="formData.id"
                                    :disabled="true"
                                    placeholder="该热力点的ID，不可编辑"
                                ></Input>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem label="数值" prop="value">
                        <Row>
                            <Col span="24">
                                <Input
                                    v-model="formData.value"
                                    placeholder="请输入POI点的代表的数值"
                                ></Input>
                            </Col>
                        </Row>
                        <Row style="margin-top: 12px">
                            <Col span="24">
                                <Button
                                    type="primary"
                                    ghost
                                    @click="generateRandom"
                                    >随机生成</Button
                                >
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="savePinData"
                            >保存数据</Button
                        >
                        <Button
                            type="error"
                            v-if="isInEdit"
                            @click="deletePinData"
                            >删除</Button
                        >
                    </FormItem>
                </Form>
            </Card>
        </Col>
    </Row>
</template>

<script>
    import config from "@/config/global";
    import { busEventEmit, busEventHandle } from "@/teleport/bus";
    import { clone } from "@/libs/tools";

    export default {
        name: "",
        props: {
            excelData: {
                type: Object,
                default: () => new Object(),
            },
        },
        data() {
            return {
                formData: {
                    id: null,
                    value: null,
                    coord: null
                },
                formRules: {
                    
                },
                isInEdit: false,
            };
        },
        watch: {
            excelData: {
                handler(n, o) {
                    this.updatePOICoord(n);
                },
                deep: true,
                immediate: true,
            },
        },
        methods: {
            generateRandom() {
                this.formData.value = parseInt(Math.random() * 100);
            },
            savePinData() {
                this.$refs["poiForm"].validate((valid) => {
                    if (valid) {
                        this.$Message.success("POI点数据已保存");
                        let resultData = {};
                        if (store.useExcel) {
                            let excelDataCopy = JSON.parse(
                                JSON.stringify(this.excelData)
                            );
                            for (let o in this.formData) {
                                delete excelDataCopy[this.xlsKey[o]];
                            }
                            resultData = Object.assign(
                                this.formData,
                                excelDataCopy
                            );
                        } else {
                            resultData = this.formData;
                        }
                        if (this.isInEdit) {
                            busEventEmit("heatmap-pin-data-mutanted", clone(resultData));
                            busEventEmit(
                                "mutant-poi-result",
                                JSON.stringify(resultData)
                            );
                            this.isInEdit = false;
                        } else {
                            busEventEmit("heatmap-pin-data-complete", clone(resultData));
                            busEventEmit(
                                "push-pin-result",
                                JSON.stringify(resultData)
                            );
                        }
                    } else {
                        this.$Message.error("请检查表单是否正确填写");
                    }
                });
            },
            deletePinData() {
                // TODO:
                busEventEmit("delete-pin-result", this.formData.id);
                busEventEmit("delete-pin", this.formData.id);
                this.isInEdit = false;
            },
            fillExcelDataKeyEnum(v) {
                let keys = Object.keys(v);
                this.xlsKeyList = keys.map((o, i) => {
                    return { id: `${o}-${i}`, key: o };
                });
            },
            readFromXls(formKey) {
                let useXls = this.useXlsKey[formKey];
                let xlsKey = this.xlsKey[formKey];
                if (useXls) {
                    this.formData[formKey] = this.excelData[xlsKey];
                }
            },
            updateFromExcel() {
                let formKeys = Object.keys(this.formData);
                formKeys.forEach((o, i) => {
                    if (this.useXlsKey[o]) {
                        this.readFromXls(o);
                    }
                });
            },
            listenUpdateFormEvent() {
                const $this = this;
                busEventHandle("update-form-data", (msg) => {
                    $this.updateFromEvent(msg);
                });
            },
            updateFromEvent(v) {
                this.formData = v;
                this.isInEdit = true;
                for (let index in this.useXlsKey) {
                    this.useXlsKey[index] = false;
                }
            },
            updatePOICoord(v) {
                this.formData.id = v.id;
                this.formData.coord = v.coord;
                this.formData.value = v.value;
            },
            getIconPreview() {
                return `${config.imageUrl}${this.formData.iconName}_marker.png`;
            },
        },
        created() {
            this.listenUpdateFormEvent();
        },
    };
</script>

<style lang="" scoped>
</style>